<template>
  <div class="message-center-container">
    <div class="message-center-container-header">
      <v-container>

        <v-row align="center">
          <v-col
              cols="20"
              sm="2"
          >
            <div class="title-text">
              设置过滤条件 :
            </div>
          </v-col>
          <v-col
              cols="20"
              sm="3"
          >
            <v-select
                :items="messageFilterType"
                label="选择类型"
                dense
                v-model="messageFilterTypeValue"
                @change="getMyValidateMessageList"
            ></v-select>
          </v-col>

          <v-col
              cols="20"
              sm="3"
          >
            <v-select
                :items="messageFilterStatus"
                label="请选择状态"
                dense
                v-model="messageFilterStatusValue"
                @change="getMyValidateMessageList"
            ></v-select>
          </v-col>

        </v-row>

      </v-container>
      <div class="content">
        <v-list three-line>
          <template v-for="(item, index) in validateMessageList">

            <v-list-item
                :key="item.title"
            >
              <v-list-item-avatar size="54">
                <v-img :src="item.senderAvatar"></v-img>
              </v-list-item-avatar>

              <v-list-item-content>
                <v-list-item-title>用户名称 : {{item.senderNickname}}</v-list-item-title>
                <v-list-item-subtitle>
                  <span>消息类型 :  {{ !item.validateType ? '好友申请' : '群聊申请' }}  ， </span>
                  {{ item.additionMessage ? `附加信息：${item.additionMessage}` : `我是${item.senderNickname}` }}
                </v-list-item-subtitle>
              </v-list-item-content>
              <v-list-item-action style="margin-right: 20px">
                <v-menu offset-y>
                  <template v-slot:activator="{ on, attrs }">
                    <v-btn
                        :color="item.status === 0?'primary':''"
                        dark
                        v-bind="attrs"
                        v-on="on"
                    >
                      <span class="text-white" v-if="item.status === 0">待处理</span>
                      <span v-else-if="item.status === 1">已同意</span>
                      <span v-else-if="item.status === 2">已拒绝</span>
                    </v-btn>

                  </template>
                  <v-list>
                    <v-list-item @click="agreeFriendApplication(item)">
                      <v-list-item-title>同意申请</v-list-item-title>
                    </v-list-item>
                    <v-list-item @click="disAgreeFriendValidate(item)">
                      <v-list-item-title>拒绝申请</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>

              </v-list-item-action>
            </v-list-item>
          </template>
        </v-list>
      </div>
    </div>
  </div>
</template>

<script>

import {getMyValidateMessageList,getUserInfo} from "../../../api";

export default {
  name: "MessageCenter",
  data() {
    return {
      messageFilter: {
        type: "",
        status: ""
      },
      messageFilterTypeValue: "",
      messageFilterType: [
        "好友",
        "群聊"
      ],
      messageFilterStatusValue: "",
      messageFilterStatus: [
        "未处理",
        "同意",
        "不同意"
      ],
      validateMessageList: []
    }
  },
  methods: {
    messageFilterUtil(key) {
      if (key === "好友") {
        return 0;
      }
      if (key === "群聊") {
        return 1;
      }
      if (key === "未处理") {
        return 0;
      }
      if (key === "同意") {
        return 1;
      }
      if (key === "不同意") {
        return 2;
      }
      return ""
    },
    // 获取验证消息列表
    async getMyValidateMessageList() {
      let messageFilterTypeValue = this.messageFilterUtil(this.messageFilterTypeValue)
      let messageFilterStatusValue = this.messageFilterUtil(this.messageFilterStatusValue)
      let res = await getMyValidateMessageList(messageFilterTypeValue, messageFilterStatusValue)
      if(res.success){
        this.validateMessageList = res.data
      }else {
        this.$message.error('获取验证信息列表失败');
      }
    },
    // 同意添加好友
    agreeFriendApplication(validateMessage){
      this.$socket.emit("sendAgreeFriendValidate", validateMessage)
      this.$message.success('同意添加好友');
      this.getMyValidateMessageList()
    },
    disAgreeFriendValidate(validateMessage){
      this.$socket.emit("sendDisAgreeFriendValidate", validateMessage)
      this.$message.success('拒绝添加好友');
      this.getMyValidateMessageList()
    }
  },
  mounted() {
    this.getMyValidateMessageList()
  },
  sockets: {
    receiveValidateMessage(message) {
      console.log("receiveValidateMessage")
      console.log(message)

    },
    sendValidateMessage(message){
      console.log("sendValidateMessage")
      console.log(message)
    }
  }
}
</script>

<style scoped lang="scss">
@import 'messageCenter.scss';
</style>